<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="search.title" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="noticeId"
      menuType="text"
      :formOptions="{ labelWidth: '120px' }"
      :menuOptions="{ width: 80 }"
      :showAdd="false"
      :showEdit="false"
      :showDelete="false"
      :showToolbar="false"
      :showCheckbox="false"
      :viewFunc="showNotice"
    >
      <qm-table-column field="categoryName" width="120px">分类名称</qm-table-column>
      <qm-table-column field="title">标题</qm-table-column>
      <qm-table-column field="publishTime" width="180px" sortable>发布时间</qm-table-column>
    </qm-table>
    <vxe-modal
      v-model="noticeView"
      :resize="true"
      width="1024"
      height="600"
      title="通知详情"
      show-zoom
      destroy-on-close
      :showFooter="false"
      :loading="noticeViewLoading"
    >
      <div>
        <el-row type="flex" justify="center">
          <h2>{{ sysNoticeDetails.title }}</h2>
        </el-row>
        <el-row type="flex" justify="center">
          <span>
            发布时间：
            {{ (sysNoticeDetails.publishTime) | date }}
          </span>
          <span style="margin-left: 15px">分类：{{ noticeCategory(sysNoticeDetails.categoryId) }}</span>
        </el-row>
        <el-row>
          <el-col :span="24">
            <editor v-model="sysNoticeDetails.content" :globalOptions="{}" :disabled="true" />
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" style="padding: 0px 15px">
            <qm-file-upload
              :dataKey="sysNoticeDetails.noticeId"
              :editable="false"
              title="附件上传"
              fileSize="20"
              fileType=".jpg,.png,.doc,.docx,.xls,.xlsx,.pdf,.txt,.zip,.rar"
              viewType="office"
            ></qm-file-upload>
          </el-col>
        </el-row>
      </div>
    </vxe-modal>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
import Editor from "@/components/Editor";
import QmFileUpload from "@/libs/components/qm-file-upload";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: [{ url: "/admin/sysNotice/selectList", method: "post" }],
      //entity: "/admin/sysNotice/getEntity",
    };
    this.urls.model = "/admin/sysNotice/getListModel";
  }

  mixin() {
    return {
      components: {
        Editor,
        QmFileUpload,
      },
      data() {
        return {
          // 通知详情 start
          noticeView: false,
          noticeViewLoading: false,
          sysNoticeDetails: {},
          noticeCategorys: [],
          // 通知详情 end
        };
      },
      methods: {
        noticeCategory(categoryId) {
          let categoryName;
          if (Array.isArray(this.noticeCategorys)) {
            const findCategory = this.noticeCategorys.filter(function (item) {
              return item.categoryId === categoryId;
            });
            if (Array.isArray(findCategory) && findCategory.length > 0) {
              categoryName = findCategory[0].categoryName;
            }
          }
          return categoryName;
        },
        showNotice(row) {
          this.noticeViewLoading = true;
          this.getEntity(
            {
              pageAction: "view",
            },
            "/admin/sysNotice/getEntity"
          )
            .then((res) => {
              const { controlData } = res;
              this.sysNoticeDetails = row;
              this.noticeCategorys = controlData.noticeCategorys;
              this.noticeViewLoading = false;
            })
            .catch((err) => {
              this.noticeViewLoading = false;
              this.msgError(err);
            });
          this.noticeView = true;
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>

